<template>
  <!-- tooltip-effect="dark" -->
  <div class="materialTable">
    <el-table
      ref="multipleTable"
      :height="tableHead.tableHeight||'100%'"
      :data="tableData"
      :show-summary="tableHead.showSummary"
      style="width: 100%"
      @selection-change="(e)=>selectChange(e,tableHead.selection)"
      :row-key="tableHead.keyId"
      :load="tableHead.lazyLoad"
      :lazy="tableHead.lazy"
      :tree-props="tableHead.treeProps"
      :row-class-name="boldFun"
      :border="tableHead.border"
      :empty-text="tableHead.noDataText"
    >
      <el-table-column type="selection" :reserve-selection="true" width="90px" align="center" v-if="tableHead.selection"></el-table-column>
      <el-table-column
        v-if="tableHead.hasSelect"
        width="80px">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row[tableHead.selectKey]" @change="changeChecked(scope)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        :fixed="tableHead.order.fixed"
        :width="tableHead.order.width || '80px'"
        align="center"
        label="序号"
        v-if="tableHead.order"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        v-for="(item, index) in tableHead.data"
        :width="item.width"
        :key="index"
        :label="item.name"
        :prop="item.key"
        header-align="center"
        :align="item.align?item.align:'center'"
        :class-name="item.prompt?'message':''"
        style="position:relative;"
        :fixed="item.fixed"
      >
        <el-table-column
          v-if="item.datas"
          v-for="(itemR , j) in item.datas"
          :width="itemR.width"
          :key="j"
          :label="itemR.name"
          :prop="itemR.key"
          header-align="center"
          :align="itemR.align?itemR.align:'center'"
          :class-name="itemR.prompt?'message':''"
          :fixed="itemR.fixed"
        ></el-table-column>
        <template slot-scope="scope">
          <span class="btn_list fr" v-if="item.file||item.fileText">
            <span
              class="edit"
              @click="editFun(scope,item.key)"
              v-if="scope.$index!=switchs&&!item.noSet"
            ></span>
            <span
              class="save"
              @click="saveFun(item.file.updateFun,scope,item.key)"
              v-if="item.file&&scope.$index==switchs"
            ></span>
            <span
              class="save"
              @click="saveFun(item.fileText.updateFun,scope,item.key)"
              v-if="item.fileText&&scope.$index==switchs"
            ></span>
            <span class="eliminate" @click="eliminateFun(scope.row)" v-if="scope.$index==switchs"></span>
          </span>
          <span class="tip_area">
            <span
              v-if="item.dbFun && item.filter"
              @dblclick="forwards(item.dbFun,scope.row)"
              style="cursor:pointer; "
            >{{item.filter[scope.row[item.key]]}}</span>
            <span v-else-if="item.filter">{{item.filter[scope.row[item.key]]}}</span>
            <span
              style="padding: 2px 4px 3px 4px; border-radius: 3px; box-shadow: 1px 1px 1px #ccc;" 
              v-else-if="item.filter_plus"
              :style="{background:item.filter_plus[scope.row[item.key]].bgColor, color:item.filter_plus[scope.row[item.key]].color }"
            >{{item.filter_plus[scope.row[item.key]].label}}</span>

            <span
              v-else-if="item.fun"
              @click="forwards(item.fun,scope.row)"
              style="cursor:pointer; color:#458afb;"
            >{{scope.row[item.key]}}</span>
            <span
              v-else-if="item.dbFun"
              @dblclick="forwards(item.dbFun,scope.row)"
              style="cursor:pointer; color:#458afb;"
            >{{scope.row[item.key]}}</span>

            <span v-else-if="item.url">
              <router-link
                :to="{ name: item.url, params: scope.row}"
                :style="{width:'100%',height:'100%',display:'block',color:item.color}"
              >{{scope.row[item.key]}}</router-link>
            </span>
            <span
              v-else-if="item.urlSkip"
              @click="jumps(item.urlSkip,scope.row)"
              :style="{cursor:'pointer',color: scope.row[item.key]==0? '':item.color ,textDecoration:'underline'}"
            >{{scope.row[item.key]}}</span>
            <span v-else-if="item.file" class="fileName file">
              <span
                class="file_name_icon"
                :style="{background:'url('+require('../../assets/img/'+scope.row.fileIcon+'.png')+') center no-repeat'}"
              ></span>
              <span
                v-if="scope.$index!=switchs&&scope.row.nodeType==2"
                @dblclick="forwards(item.file.readFun,scope.row)"
              >{{scope.row[item.key]}}</span>
              <span
                @click="forwards(item.file.clickFun,scope.row)"
                v-if="scope.$index!=switchs&&scope.row.nodeType==1"
              >{{scope.row[item.key]}}</span>

              <input
                @click.stop="return false;"
                maxlength="100"
                v-if="scope.$index==switchs"
                style="width:140px;height:30px;"
                type="text"
                v-model="tm_str"
              />
            </span>
            <span v-else-if="item.fileText" class="fileText">
              <span v-if="scope.$index!=switchs">{{scope.row[item.key]}}</span>
              <input
                v-if="scope.$index==switchs"
                style="width:140px;height:30px;"
                maxlength="100"
                type="text"
                v-model="tm_str"
              />
            </span>
            <span v-else-if="item.input">
              <input
                style="width:140px;height:30px;"
                type="text"
                v-model="scope.row[item.key]"
                @blur="forwards(item.input.blur,scope.row)"
                :placeholder="item.input.placeholder"
              />
            </span>
            <span v-else-if="item.img">
              <img :src="scope.row[item.img]" style="width:100%;" alt />
            </span>

            <span
              v-else
              :style="{color:item.color,fontSize:item.fontSize+'px' }"
            >{{scope.row[item.key]}}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :width="tableHead.operation_width?tableHead.operation_width+'px':''"
        align="center"
        v-if="tableHead.setFunction"
        label="操作"
        :fixed="tableHead.setFunctionFixed"
      >
        <template slot-scope="scope">
          <span
            v-for="(item, index) in tableHead.setFunction"
            :key="index"
            v-if="!tableHead.forbiddenParent||!scope.row.children"
          >
            <template v-if="item.hideKey">
              <el-button
                size="mini"
                v-if="item.hideState && item.hideState==scope.row[item.hideKey]"
                @click="forwards(item.fun,scope)"
              >{{item.name}}</el-button>
              <el-button
                size="mini"
                v-else-if="item.showState && item.showState!=scope.row[item.hideKey]"
                @click="forwards(item.fun,scope)"
              >{{item.name}}</el-button>
            </template>
            <template v-else>
              <el-button size="mini" @click="forwards(item.fun,scope)">{{item.name}}</el-button>
            </template>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :width="tableHead.check.operation_width?tableHead.check.operation_width+'px':''"
        align="center"
        v-if="tableHead.check"
        label="权限操作"
      >
        <template slot-scope="scope">
          <span v-for="(item, index) in tableHead.check" :key="index">
            <el-checkbox v-model="scope.row[item.id]" @change.native="forwards(item.fun,scope)"></el-checkbox>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchs: null,
      tm_str: "新建文件夹",
      value: [],
      chooseList: []
    };
  },

  watch: {
    tableData: {
      handler(newName, oldName) {
        this.switchs = this.tableHead.switchs;
        if (this.tableHead.switchs === null) {
          this.tm_str = "新建文件夹";
        }
        if (this.tableHead.selection) {
          this.selectChange(null, this.tableHead.selection);
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    selectChange(data, fun) {
      if (data) {
        this.chooseList = data;
      }
      if (fun) {
        fun.fun(this.chooseList);
      }
    },
    forwards(fun, scope) {
      fun(scope);
    },
    jumps(names, parData) {
      const { href } = this.$router.resolve({
        name: names,
        query: {
          id: parData.projectId
        }
      });
      window.open(href, "_blank");
    },
    boldFun({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        if (this.tableHead.boldKey) {
          if (row[this.tableHead.boldKey] == this.tableHead.boldStatus) {
            return "bold_class dbColor";
          }
        } else {
          return "dbColor";
        }
      } else {
        if (this.tableHead.boldKey) {
          if (row[this.tableHead.boldKey] == this.tableHead.boldStatus) {
            return "bold_class single";
          }
        } else {
          return "single";
        }
      }
    },
    editFun(scope, name) {
      this.switchs = scope.$index;
      this.tm_str = scope.row[name];
    },
    saveFun(fun, scope, key) {
      //更改提交
      // this.switchs = null;
      this.tableData[scope.$index][key] = this.tm_str;
      fun(scope.row);
    },
    eliminateFun(data) {
      if (data.newNode === true) {
        this.tableHead.switchs = null;
        this.tableData.splice(0, 1);
      } else {
        this.switchs = null;
      }
      this.tm_str = "新建文件夹";
    },

    changeChecked(scope) {
      this.$emit('selectChange', scope.row);
    }
  },
  props: ["tableHead", "tableData", "treeData"]
};
</script>

<style lang="less" scoped>
.tree_select {
  position: absolute;
  left: 0;
  top: 7px;
  margin-right: 10px;
}
</style>

<style lang="less">
.save {
  background: url("../../assets/img/tree_icon_save.png") center no-repeat;
}

.eliminate {
  background: url("../../assets/img/tree_icon_clear.png") center no-repeat;
}

.edit {
  background: url("../../assets/img/tree_icon_edit.png") center no-repeat;
}
.delete {
  background: url("../../assets/img/tree_icon_remove.png") center no-repeat;
}

.materialTable {
  width: 100%;
  height: 100%;
  // background: none;
  // background: linear-gradient(rgba(10, 33, 58, 0.2), rgba(26, 113, 123, 0.2));
}
.materialTable > div {
  background: none;
  color: #838383;
}

.materialTable * {
  box-sizing: border-box;
}
.materialTable {
  // 列表下拉展示功能
  input {
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    padding: 0 0 0 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-table {
    overflow: initial !important;
  }
  .el-table__body-wrapper {
    overflow: initial !important;
    background: #fff;
  }
  .el-table--scrollable-y .el-table__body-wrapper,
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow: auto !important;
  }
  // 列表下拉展示功能
  .el-table tr.el-table__row:hover {
    // box-shadow: 0px -2px 2px #eff5fe inset, 0px 2px 2px #eff5fe inset;
    // background: #e9e9e9;
    box-sizing: border-box;
  }

  .el-table tr.el-table__row td,
  .el-table thead.is-group th {
    // background: none;
  }

  .el-table .bold_class .message span {
    position: relative;
  }

  .el-table .bold_class .message span::before {
    color: #f00;
    transform: scale(1.2);
    content: "●";
    line-height: 100%;
    height: 100%;
    position: absolute;
    left: -14px;
    bottom: -1px;
  }

  .el-icon-arrow-right:before {
    color: #458afb;
    font-weight: bold;
  }

  .fileName {
    position: relative;
    padding-left: 50px;
    cursor: pointer;
  }

  .fileText {
    position: relative;
    padding-left: 50px;
    cursor: pointer;
  }

  .file_name_icon {
    position: absolute;
    left: 10px;
    top: -2px;
    width: 20px;
    height: 20px;
    display: block;
    background-size: 100% !important;
    // content: url("../../assets/img/file_img.png");
  }

  .btn_list {
    position: relative;
    z-index: 5;
    height: 30px;
    line-height: 30px;
    padding: 0;
  }

  .btn_list span {
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-size: auto 60%;
    float: left;
  }
  .el-table .cell.el-tooltip .tip_area {
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
  }

  // .el-table__body-wrapper {
  //   height: auto !important;
  // }

  .el-table td,
  .el-table th,
  .el-table tr,
  .el-table th.is-leaf {
    padding: 10px 0;
    background: none;
    border: none;
    color: #575757;
  }
  .el-table:before,
  .el-table--border:after,
  .el-table--group:after {
    display: none;
  }
  .el-table th > .cell,
  .el-table td > .cell {
    font-size: 13px;
    // font-weight: 600;
  }
  .el-table tr.el-table__row:hover {
    // box-shadow: none !important;
    border: none;
  }
  .el-table--border,
  .el-table--group,.el-table--border th.gutter:last-of-type {
    border: none;
  }
  .el-table .single {
    // background: rgba(17,131,191, .1);
  }
  .el-table .cell.el-tooltip .tip_area {
    font-size: 14px;
    color: #838383;
    font-weight: normal;
  }
  .el-table__footer-wrapper,
  .el-table__header-wrapper {
    color: #838383;
  }
  .el-table thead {
    background: #E8E8E8;
    color: #575757;
  }
  .el-table thead tr {
    font-weight: bold;
  }
  // 超出隐藏功能
  .el-table .cell.el-tooltip {
    overflow: hidden;
  }
  // 列表下拉展示功能
  .el-table .cell.el-tooltip .tree_select {
    overflow: initial !important;
    font-size: 13px;
    line-height: 30px;
  }
  .el-table__fixed-right:before,
  .el-table__fixed:before {
    display: none;
  }
}


.el-table tbody tr:hover>td { 
  // background-color:transparent !important
}
</style>